<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米账号 - 登录</title>

    <link rel="stylesheet" href="../css/logo.css" />

    <style type="text/css">
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right">
      <header>
        <a href="../html/index.html" class="logo">
          <img src="../img/logo.png" alt="" />
          <span>小米账号</span>
        </a>
        <nav>
          <a href="">用户协议</a>
          <a href="">隐私政策</a>
          <a href="">帮助中心</a>
          <span>|</span>
          <div class="item">
            <a href="">中文(简体)<i></i></a>
            <ul>
              <li>中文(繁体)</li>
              <li>English</li>
            </ul>
          </div>
        </nav>
      </header>
      <main>
        <div class="card">
          <div class="box">
            <!-- 切换登录方式 -->
            <div class="switch">
              <div class="ico">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
              </div>
              <div class="text">
                <p>扫码登录</p>
                <div class="triangle"></div>
              </div>
            </div>

            <!-- 输入登录 -->
            <form action="../interface/login.php" method="post">
              <div class="input">
                <div class="title">
                  <a href="#/login" class="active">登录</a>
                  <a href="#/reg">注册</a>
                </div>

                <div class="ca">
                  <!-- 登录 -->
                  <div class="content login">
                    <div class="text">
                      <div class="case">
                        <p>邮箱/手机号码/小米ID</p>
                        <input type="text" name="username" value="" />
                      </div>
                      <div class="hint">
                        <p>请输入账号</p>
                      </div>
                    </div>
                    <div class="password">
                      <div class="case">
                        <p>密码</p>
                        <input
                          type="password"
                          name="password"
                          value=""
                          class="pwd"
                        />
                        <div class="ico">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yanjing_bi"></use>
                          </svg>
                        </div>
                      </div>
                      <div class="hint">
                        <p>请输入登录密码</p>
                      </div>
                    </div>
                  </div>

                  <!-- 注册 -->
                  <div class="content reg">
                    <div class="region">
                      <div class="case">
                        <h6>国家/地区</h6>
                        <h5>中国</h5>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-jiantou1"></use>
                        </svg>
                      </div>
                    </div>
                    <div class="phone">
                      <div class="case">
                        <div class="ct">
                          <div>
                            <h6>国家码</h6>
                            <p>+86</p>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-jiantou1"></use>
                            </svg>
                          </div>
                        </div>
                        <p>手机号</p>
                        <input type="number" name="phone" value="" />
                      </div>
                      <div class="hint">
                        <p>请输入手机账号</p>
                      </div>
                    </div>
                    <div class="vc">
                      <div class="case">
                        <p>短信验证码</p>
                        <input type="number" name="vc" value="" />
                        <div class="ico">获取验证码</div>
                      </div>
                      <div class="hint">
                        <p>请输入短信验证码</p>
                      </div>
                    </div>
                  </div>

                  <!-- 共有样式 -->
                  <div class="common">
                    <div class="check">
                      <em>
                        <input type="checkbox" />
                        <b></b>
                      </em>
                      <label for="">
                        <span
                          >已阅读并同意小米账号<a href="">用户协议</a>和<a
                            href=""
                            >隐私政策</a
                          ></span
                        >
                      </label>

                      <div class="hint">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        请您同意用户条款
                      </div>
                    </div>
                    <button type="button" class="submit login">登录</button>
                    <button type="button" class="submit reg">注册</button>
                    <div class="way">
                      <p class="login">
                        <a href="">忘记密码？</a>
                        <a href="">手机号登录</a>
                      </p>
                      <p class="reg">
                        <a href="">收不到验证码？</a>
                      </p>
                    </div>
                    <div class="more">
                      <p>其他登录方式</p>
                      <div>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-zhifubao"></use>
                        </svg>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-weixin1"></use>
                        </svg>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-QQ"></use>
                        </svg>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-weibo"></use>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>

          <!-- 扫码登录 -->
          <div class="code">
            <div class="switch">
              <div class="ico">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-diannao"></use>
                </svg>
              </div>
              <div class="text">
                <p>密码登录</p>
                <div class="triangle"></div>
              </div>
            </div>
            <h2>扫码登录 安全便捷</h2>
            <div class="co">
              <img src="../img/xz(1).png" alt="" />
              <img src="../img/logo.png" alt="" />
            </div>
            <p>请使用小米手机/米家等小米旗下APP扫码登录</p>
            <div class="app">
              <p>支持扫码的App</p>
              <div>
                <div class="mijia">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-MIJIA"></use>
                  </svg>
                  <p>米家</p>
                </div>
                <div class="mi">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-xiaomiguishu"></use>
                  </svg>
                  <p>小米商城</p>
                </div>
                <div class="xiaoai">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xitongtuisong"></use>
                  </svg>
                  <p>小爱音响</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div class="copy">
        <p>
          小米公司版权所有-京ICP备10046444-
          <a href="">京公网安备11010802020134号</a>
          -京ICP证110507号
        </p>
      </div>
    </div>
    <script src="https://at.alicdn.com/t/font_3156004_3t2bd5xht8s.js"></script>
    <script src="../js/lib/jquery.js"></script>
    <script src="../js/logo.js"></script>
  </body>
</html>
